<template>
  <div class="gaode-map">
    <div class="tips"><span>注意： 高德地图只提供国内详细地图信息</span></div>
    <div class="map" id="map"></div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';

import 'ol/ol.css';
import Map from 'ol/Map';
import TileGrid from 'ol/tilegrid/TileGrid';
import TileImage from 'ol/source/TileImage';
import Tile from 'ol/layer/Tile';
import View from 'ol/View';
import { fromLonLat, get } from 'ol/proj';
@Component({
  components: {},
})
export default class GaoDeMap extends Vue {
  private map: any = null;

  public mounted() {
    this.createMap(() => {
      this.map.on('click', ($evt: any) => {
        console.log($evt);
      });
    });
  }

  public createMap(cb: any) {
    this.map = new Map({
      target: 'map',
      layers: [
        new Tile({
          source: new TileImage({
            tileUrlFunction: this.tileFunction,
            attributions:
              'Tiles © <a href="https://www.amap.com/">高德地图</a>',
          }),
        }),
      ],
      view: new View({
        center: [11438968.29747108, 2886802.8809009036],
        zoom: 8,
      }),
    });
    if (this.map) {
      cb && cb();
    }
  }
  public tileFunction(tileCoord: any) {
    let [z, x, y] = tileCoord;
    return `https://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x=${x}&y=${y}&z=${z}`;
  }
}
</script>
<style lang="less" scoped>
.tips {
  padding: 10px;
  font-size: 24px;
}
.map {
  height: calc(100vh - 274px);
  width: 100%;
}
</style>